<template>
  <div class="app-container">
    <el-form ref="form" :model="formModel" label-width="100px" :rules="rules">
      <el-row style="text-align: center">
        <el-col :span="12">
          <el-form-item label="部门领域:" prop="depModel">
            <hey-select v-model="formModel.depModel" :in-clude-keys="depModelList" filterable clearable clcd="dep_model_cd"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件组编号:" prop="fileGroupId">
            <hey-select v-model="formModel.fileGroupId" @change="changefileGroupId" clcd="file_group_cd" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件代码:" prop="fileCd">
            <el-select v-model="formModel.fileCd" clearable @change="changeFileCd">
              <el-option v-for="item in fileCdArr" :key="item.datakey" :label="item.datavalue" :value="item.datakey"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-upload
      style="display:inline-block"
      ref="upload"
      action=""
      :file-list="fileList"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :http-request="uploadSectionFile"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </el-upload>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";

  export default {
    name: 'Upload',
    data() {
      return {
        fileList: [],
        showQueryDialog: false,
        fileObj:{},
        fileNm:'',
        fileCdArr: [],
        formModel: {
          fileGroupId: '',
          fileCd: '',
          depModel: '',
        },
        rules: {

        }
      }
    },
    computed: {
      ...mapGetters([
        'depModelList'
      ])
    },
    mounted() {
      this.$form = this.$refs.form
      this.initRules()
    },
    methods: {
      closeDialog() {
        this.$parent.$emit('update:visible', false)
      },
      changeFileCd(value){
        this.fileNm = this.fileObj[value]
      },
      changefileGroupId(id){
        const url = '/dictionary/queryFileCd'
        const param = {}
        param.fileGroupId = id
        this.post(url, param).then(res => {
          this.fileCdArr = res
          const arr = this.fileCdArr
          const obj = this.fileObj
          for (let i = 0; i < arr.length; i++) {
            var key = arr[i].datakey
            var value = arr[i].fileNm
            obj[key] = value;
          }
        })
      },
      initRules() {
        const NULL_TIP = this.CONST.NULL_TIP
        this.rules = {
          fileGroupId: [{ required: true, message: NULL_TIP, trigger: ['change', 'blur'] }],
          fileCd: [{ required: true, message: NULL_TIP, trigger: ['change', 'blur'] }],
          depModel: [{ required: true, message: NULL_TIP, trigger: ['change', 'blur'] }],
        }
        this.$nextTick(_ => {
          this.$form.clearValidate()
        })
      },
      submitUpload() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.$refs.upload.submit();
          }
        })
      },
      uploadSectionFile(param) {
        const url = '/file/import'
        var fileObj = param.file;
        var regStr = this.fileNm
        var reg = new RegExp(regStr)
        if(!reg.test(fileObj.name)){
          this.$warn('选择的文件代码与文件名['+fileObj.name+']不匹配!,文件名参考格式为:'+regStr)
          return false
        }
        // FormData 对象
        var form = new FormData();
        // 文件对象
        const fileCd = this.formModel.fileCd
        const fileGroupId = this.formModel.fileGroupId
        const depModel = this.formModel.depModel
        form.append("file", fileObj);
        form.append("fileGroupId", fileGroupId);
        form.append("depModel", depModel);
        form.append("fileCd", fileCd);
        const tip = '上传文件成功!'
        this.post(url, form).then(res => {
          this.$info(tip, () => {
            this.$emit('uploadSuc')
            this.closeDialog()
          })
        })
      },
      handleRemove(file, fileList) {

      },
      handlePreview(file) {

      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
